<template>
  <div>
    <el-dialog title="裁剪头像" :visible.sync="dialogStatusVisible" @open="selectAvatar">
      <div style="margin-top:20px;height:400px;">
        <div class="cropper" style="text-align:center;height:400px;">
          <vueCropper
              ref="cropper"
              :img="option.img"
              :outputSize="option.outputSize"
              :outputType="option.outputType"
              :info="option.info"
              :canScale="option.canScale"
              :autoCrop="option.autoCrop"
              :autoCropWidth="option.autoCropWidth"
              :autoCropHeight="option.autoCropHeight"
              :fixed="option.fixed"
              :fixedBox="option.fixedBox"
              :fixedNumber="option.fixedNumber"
          ></vueCropper>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="success" @click.stop="clip">确认</el-button>
        <el-button plain @click.stop="dialogStatusVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <input ref="fileInput" type="file" accept=".jpg,.jpeg,png" style="display: none" @change="handleSelectAvatar">
  </div>
</template>

<script>
import {VueCropper} from 'vue-cropper'

export default {
  components: {
    VueCropper
  },
  data () {
    return {
      dialogStatusVisible: false,
      option: {
        img: '', // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 1, // 裁剪生成图片的质量
        outputType: 'png', // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 150, // 默认生成截图框宽度
        autoCropHeight: 150, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: true, // 截图框能否拖动
        original: true, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        canMove: false
      }
    }
  },
  mounted () {
    this.selectAvatar()
  },
  methods: {
    // 选择头像
    selectAvatar () {
      // 重置value，多次选择同一文件才可触发
      this.$refs.fileInput.value = null
      this.$refs.fileInput.click()
    },
    async handleSelectAvatar (event) {
      let files = event.target.files
      this.option.img = URL.createObjectURL(files[0])
      this.dialogStatusVisible = true
    },
    clip () {
      // 获取截图的 blob 数据
      this.$refs.cropper.getCropBlob(async (blob) => {
        console.log(blob)
        blob.name = 'avatar1.png'
        let url = await this.uploadAvatar(blob)
        console.log('url = ' + url)
        if (url === null) {
          this.$message.error('头像上传失败!')
        } else {
          this.$emit('getUrl', url)
        }
      })
    },
    // 上传头像,获取url
    async uploadAvatar (file) {
      const loading = this.$loading({
        target: '.el-dialog',
        text: '上传头像中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })

      try {
        const formData = new FormData()
        formData.append('file', file, 'avatar.png')
        const response = await this.axios.post('/api/v1/file/upload/avatar', formData, {
          headers: {
            'Content-type': 'multipart/form-data'
          }
        })

        loading.close()

        if (response.data.code === 1) {
          this.dialogStatusVisible = false
          let url = response.data.data
          return url
        } else {
          console.log('error = ' + response.data.message)
          return null
        }
      } catch (error) {
        loading.close()
        console.log('error = ' + error)
        return null
      }
    }
  }
}
</script>
<style>
.v-modal{
  position: relative;
}
</style>
